<template>
  <div class="layout">
    <Layout :style="{minHeight: '100vh'}">
      <Layout>
        <Header class="layout-header-bar">
          <Row>
            <i-col span="3">
              <div class="logo-con">
                <a href="#"><img :src="logo" /></a>
              </div>
            </i-col>
            <i-col span="9">
              <i-menu mode="horizontal" style="height: 65px;">
                <Menu-item to="/index" name="1" style="font-size: 1rem;">
                  首页
                </Menu-item>
                <Menu-item name="2" style="font-size: 1rem;">
                  名师推荐
                </Menu-item>
                <Menu-item name="3" style="font-size: 1rem;">
                  新闻
                </Menu-item>
                <Menu-item name="4" style="font-size: 1rem;">
                  通知
                </Menu-item>
              </i-menu>
            </i-col>
            <i-col span="6">
              <Input search enter-button placeholder="搜索课程..." class="search-course"/>
            </i-col>
            <i-col span="6">
              <Dropdown style="float:right;" v-if="isLogin===true">
                <a href="javascript:void(0)" >
                  <img :src="avatar" style="z-index: 9999;float:right;width: 40px;height: 40px;border-radius: 50%;margin-top: 14px;margin-bottom: 14px">
                  <Icon type="ios-arrow-down" style="color: transparent"></Icon>
                </a>
                <DropdownMenu slot="list">
                  <DropdownItem>我的课程</DropdownItem>
                  <DropdownItem>订单中心</DropdownItem>
                  <DropdownItem>个人设置</DropdownItem>
                  <DropdownItem>安全退出</DropdownItem>
                </DropdownMenu>
              </Dropdown>
              <Dropdown style="float:right;" v-if="isLogin===false">
                <a href="javascript:void(0)" @click="loginAction" style="font-size: 16px;color: #0f0f0f;">
                  登录
                </a>
                /
                <a href="javascript:void(0)" @click="registerAction" style="font-size: 16px;color: #0f0f0f;">
                  注册
                </a>
              </Dropdown>
              <Dropdown style="float:right;" placement="bottom-end">
                <a href="javascript:void(0)" >
                  <Button icon="ios-cart" size="large" style="border-radius: 18px;">购物车 <span class="cart-number">5</span></Button>
                  <Icon type="ios-arrow-down" style="color: transparent"></Icon>
                </a>
                <DropdownMenu slot="list" style="width: 300px;padding: 10px 25px;">
                  <div style="margin-top: -25px;width: 100%;">
                    <div style="font-weight: bold;float: left;">我的购物车</div>
                    <div style="font-size: 12px;color: #9199A1;float: right;">已加入0门课程</div>
                  </div>
                  <div style="width: 100%;padding: 15px;">
                    <div>
                      <p style="text-align: center;margin-top: 45px;font-size: 68px;color: #4d5163;"><Icon type="md-cart" style="color: #808695" /></p>
                      <p style="margin-top: 25px;text-align: center;line-height: 15px;margin-bottom: 25px;">购物车里空空如也<br>快去选购你中意的课程</p>
                    </div>
                  </div>
                  <div style="width: 100%;border-top: 1px solid #808695;">
                    <div style="float: left;">我的订单中心</div>
                    <div style="float: right;"><Button type="error" style="border-radius: 18px;">去购物车</Button></div>
                  </div>
                </DropdownMenu>
              </Dropdown>
              <Dropdown style="float:right;" placement="bottom-end">
                <a href="javascript:void(0)" >
                  移动版
                  <Icon type="ios-arrow-down" style="color: transparent"></Icon>
                </a>
                <DropdownMenu slot="list" style="padding-bottom: -10px !important;">
                  <img :src="QRCode" >
                </DropdownMenu>
              </Dropdown>
              <Modal v-model="loginModal" width="360">
                <p slot="header" style="color:#f60;text-align:center">
                  <span>登录</span>
                </p>
                <div style="text-align:center">
                  <Form ref="formValidate" :model="loginForm" :rules="loginRuleValidate">
                    <FormItem label="" prop="name" style="width: 100%;">
                      <Input v-model="loginForm.name" placeholder="请输入登录手机/邮箱" style="width: 100%;"/>
                    </FormItem>
                    <FormItem label="" prop="password" style="width: 100%;">
                      <Input v-model="loginForm.password" type="password" placeholder="请输入密码" style="width: 100%;"/>
                    </FormItem>
                    <Checkbox v-model="single">Checkbox</Checkbox>
                  </Form>
                </div>
                <div slot="footer">
                  <Button type="error" size="large" long :loading="modal_loading" @click="login">登录</Button>
                </div>
              </Modal>
            </i-col>
          </Row>
        </Header>
        <Content>
          <router-view></router-view>
        </Content>
        <Footer style="height: 120px;background-color: #f8fafc !important;padding-left: 20px !important;padding-bottom: 10px !important;padding-top: 0px !important;">
          <div style="float: left;padding: 3rem 10rem;">凤翮正道技术部 &copy;2018 版权所有 侵权必究</div>
          <div style="float: right;padding: 3rem 10rem;">凤翮正道技术部 &copy;2018 版权所有 侵权必究</div>
        </Footer>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import logo from '@/assets/images/logo.gif'
import avatar from '@/assets/images/avatar.jpg'
import QRCode from '@/assets/images/qrcode.png'
export default {
  name: 'frame',
  data () {
    return {
      logo,
      avatar,
      QRCode,
      visible: false,
      isLogin: true,
      loginModal: false,
      loginForm: {},
      modal_loading: false,
      formValidate: {
        name: '',
        password: ''
      },
      loginRuleValidate: {
        name: [
          {required: true, message: '请输入正确的邮箱或手机号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入6-16位密码,区分大小写,不能用空格', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleOpen () {
      this.visible = true
    },
    handleClose () {
      this.visible = false
    },
    loginAction () {
      this.loginModal = true
    },
    registerAction () {
      alert('fuck reg')
    },
    login () {}
  }
}
</script>

<style scoped>
  .logo-con {
    float: left;
    height: 64px;
    width:160px;
    line-height: 64px;
    margin: 0 20px;
  }
  .logo-con img{
    max-height: 64px;
    width: 100%;
  }
  .layout-header-bar {
    background: #fff !important;
    z-index: 900;
    box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
  }
  .search-course {
    float: right;
    margin-right: 40%;
    width: 60%;
    height: 28px !important;
    padding: 15px 0;
    line-height: 64px;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }
  .search-course input {
    width: 100%;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }
  .cart-number{
    padding: 0 5px;
    height: 16px;
    line-height: 16px;
    background: #f01414;
    border-radius: 50%;
    color: #fff;
    margin-left: 8px;
  }
</style>
